<template>
    <div class="cinema">
        <div class="nav">
            <span>全城<i class="fa fa-caret-down"></i></span>
            <span>品牌<i class="fa fa-caret-down"></i></span>
            <span>特色<i class="fa fa-caret-down"></i></span>
        </div>
        <div>
            <ul>
                <li v-for="item in date" :key="item.id">
                    <p>
                        <span class="shopname">{{item.name}}</span>
                        <span class="price">{{item.price}}</span>
                        <span class="price-desc">元起</span>
                    </p>
                    <p class="address">
                        <span>{{item.address}}</span>
                        <span>{{item.distance}}km</span>
                    </p>
                    <p class="tips">
                        <span>小吃</span>
                        <span>折扣卡</span>
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Cinema',
        methods: {
            getCinemaData() {
                var that = this;
                axios.get('/mock/api.json')
                .then(function(response) {
                    console.log(response);
                    if(response.status == 200) {
                        if(response.data && response.data.date) {
                            that.date = response.data.date
                        }
                    }
                })
                .catch(function(error) {
                    console.log(error);
                })
            }
        },
        created() {
            this.getCinemaData();
        },
        data() {
            return {
                date: []
            }
        },
    }
</script>

<style scoped>
    .cinema {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .nav {
        width: 100%;
        border-bottom: 1px solid #ccc;
    }

    .nav span {
        width: 33%;
        height: 40px;
        line-height: 40px;
        display: inline-block;
        text-align: center;
    }

    .nav i {
        margin-left: 5px;
    }

    li {
        margin: 10px 2.5%;
        border-bottom: 1px solid #ccc;
    }

    .shopname {
        font-weight: bolder;
    }

    .price {
        color: #E54847;
        margin: 0 5px;

    }

    .price-desc {
        font-size: 12px;
        color: #E54847;
    }

    .address {
        overflow: hidden;
    }
    
    .address span{
        font-size: 12px;
        display: inline-block;
        color: #999;
        margin: 10px 0;
    }

    .address span:last-child {
        float: right;
    }

    .tips {
        margin-bottom: 10px;
    }

    .tips span {
        color: orange;
        display: inline-block;
        border: 1px solid orange;
        padding: 0 5px;
    }
</style>